<template>
  <div>
    <mt-swipe :auto="4000">
      <!-- 在组件中使用v-for必须要绑定:key -->
      <!-- 将来，谁使用此 轮播图组件，谁为我们传递 lunbotuList -->
      <!-- lunbotuList 应该是 父组件向子组件传值来设置 -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.aid">
        <img :src="item.pic" alt="" :class="{'full': isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>

  <!-- 分析：为什么 商品详情 的轮播图那么丑 -->
  <!-- 1.首页中的图片，他的宽和高 都是使用了100%的宽度 -->
  <!-- 2.在商品详情页面中，轮播图 的图片，如果也使用 宽高为100% 页面就不好看 -->
  <!-- 3.商品详情页面汇总的轮播图，期望高度是100%，但宽度为自适应 -->
  <!-- 4.经过分析，得到问题原因：首页中的轮播图 和 详情中 的轮播图，分期电视 宽高到底是100% 还是 自适应 -->
  <!-- 5.几人这两个轮播图，其他方面都是没有冲突，只是宽度有分歧，我们可以定义一个属性，然后让轮播图的调用者，手动指定是100%  -->
</template>

<script>
export default {
    props: ["lunbotuList","isfull"]
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;

  .mint-swipe-item {
    text-align: center;
    img{
        // width: 100%;
        height: 100%;
    }
  }
}

.full{
    width: 100%;
}

</style>
